import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import screenfull from 'screenfull'
interface DropdownItem {
  name: string,
  value: string,
  icon?: string
}

interface SetUpItem {
  name: string,
  value: string
}

const install = (props: any) => {
  const isScreenfull = ref<boolean>(false)
  const isSearch = ref<boolean>(false)
  const searchText = ref<string | number>('')
  const dropdownText = ref<string>('')
  const searchRef = ref(null)
  const dropdownRef = ref(null)
  const showDialog = ref<boolean>(false)
  const router: any = useRouter()
  const route: any = useRoute()
  const store = useStore()
  const dropdownItems = ref<DropdownItem[]>(store.getters.getMenusItems)
  const setItems = reactive<SetUpItem[]>([
    {
      name: '主题',
      value: 'theme'
    },
    {
      name: '退出',
      value: 'logout'
    },
  ])
  const theme = ref<string>('dark')
  const screenfullActive = () => {
    if (screenfull.isEnabled) {
      isScreenfull.value = !isScreenfull.value
      screenfull.toggle()
    } else {
      console.warn('您的浏览器不支持全屏！')
    }
  }
  const searchHandle = (val: string) => {
    // console.log(val);
    router.push(val)
  }
  const searchIconClick = (): void => {
    isSearch.value = !isSearch.value
    if (isSearch.value) {
      // searchRef.value
    }
    // console.dir(searchRef.value);
  }
  // 下拉选择
  const dropdownHandle = (val: any): void => {
    // console.log(111, val, route.path);
    dropdownItems.value.forEach((el: DropdownItem) => {
      if (el.value === val) {
        dropdownText.value = el.name
        router.push(el.value)
      }
    })
  }
  // 设置
  const handleSetting = (val: any) => {
    console.log(val)
    switch (val) {
      case 'theme':
        showDialog.value = true
        break
      case 'logout':
        store.dispatch('logout')
        break
      default:
        break
    }
  }
  const dropdownVisible = (val: any): void => {
    // console.log(val);
  }
  const screenfullIcon = computed(() => {
    if (isScreenfull.value) {
      return 'icon-tuichuquanping'
    }
    return 'icon-quanping'
  })

  onMounted(() => {
    // console.log(route.path);
    dropdownItems.value.forEach((el: DropdownItem) => {
      if (route.path.indexOf(el.value) > -1) {
        dropdownText.value = el.name
      }
    })
  })

  return {
    searchText,
    isSearch,
    screenfullIcon,
    dropdownText,
    dropdownItems,
    setItems,
    searchRef,
    dropdownRef,
    showDialog,
    theme,
    searchHandle,
    screenfullActive,
    dropdownHandle,
    searchIconClick,
    handleSetting,
    dropdownVisible
  }
}
export default install